/*
  0 定时函数是window对象的方法，定时器方法是异步方法
  1 setInterval(function(){},n}  每隔n毫秒执行一次函数，一直执行
    clearInterval(id) 清空定时器id,id是定时器的编号，是数字
  2 setTimeout(function(){},n) 过了n毫秒后执行回调函数一次，只执行一次
    clearTimeout(id) 清空定时器id,id是定时器的编号，是数字
*/
let id = 0
let dateBox = document.querySelector('.date-box')
dateBox.innerHTML = formatTime(new Date())
// 启动时钟
function start() {
  // 在任意时刻只能有一个定时器在操作dateBox
  if (id) {
    clearInterval(id)
  }
  id = setInterval(function () {
    dateBox.innerHTML = formatTime(new Date())
  }, 1000)
  console.log(id)
}
start()

// 停止时钟
function stop() {
  if (id) {
    // 清空定时器
    clearInterval(id)
  }
}

// 倒计时
let count = 5
// 定时器的编号
let countTimer = 0
// 启动倒计时的按钮
let countBtn = document.getElementsByClassName('count-btn')[0]
// 不进行倒计时操作时，button是可用的
countBtn.disabled = false
function countDown() {
  if (countTimer) {
    clearInterval(countTimer)
  }
  countTimer = setInterval(function () {
    count--
    // 禁用button
    countBtn.disabled = true
    // 写倒计时到元素count-down中
    document.querySelector('.count-down').innerHTML = count + 's'
    // 写倒计时到元素countBtn中
    countBtn.innerHTML = '倒计时' + count + 's'
    if (count === 0) {
      // 倒计时结束清空定时器
      clearInterval(countTimer)
      // 重置数据到原始状态
      count = 5
      countBtn.disabled = false
      countBtn.innerHTML = '倒计时'
    }
  }, 1000)
}

// 5s后修改元素的样式
let t = 0
if (t) {
  clearTimeout(t)
}
t = setTimeout(function () {
  dateBox.style.color = '#409eff'
}, 5000)

/*
  js:轮播图
  原生js实现轮播图
  swiper框架实现轮播效果
*/
